<template>
	<div ref="fullscreenElement">
		<div class="header">
		  <h3>绑定作业管理</h3>
		  <!-- <div class="routerlistbox">
		    <router-link :to="`/homeabnormalexamnumber?subjectid=${$route.query.subjectid}&examid=${$route.query.examid}&examtitle=${$route.query.examtitle}&sujectname=${$route.query.sujectname}`" active-class="hover">答题卡异常</router-link>
		    <router-link :to="`/homeoptionexception?subjectid=${$route.query.subjectid}&examid=${$route.query.examid}&examtitle=${$route.query.examtitle}&sujectname=${$route.query.sujectname}`" active-class="hover">填涂异常</router-link>
			<router-link :to="`/homeabnormalrating?subjectid=${$route.query.subjectid}&examid=${$route.query.examid}&examtitle=${$route.query.examtitle}&sujectname=${$route.query.sujectname}`" active-class="hover">打分异常</router-link>
		  </div> -->
		  <p>
		     <b @click="toggleFullscreen"><img src="../../assets/image/school/qp.png" alt="">{{ isFullscreen ? "退出全屏" : "全屏(F11)" }}</b>
			 <em @click="quiteboxclick">退出</em>
		  </p>
		</div>
		<div class="cropperBox">
			 <div class="cropperImageset">
				 <!-- <div class="cardczpk" ref="draggableBox"
				 			:style="{
				 			  left: `${position.x}px`,
				 			  top: `${position.y}px`,
				 			}"
				 			@mousedown="startDrag"
				 			@touchstart.prevent="startDrag">
				 			 <span>答题卡操作</span>
				 			 <div>
				 				 <i @click="roateclick">旋转</i>
				 				 <b @click="cardabsore=true">排序</b>
				 			 </div>
				 </div> -->
				<div class="image-wrapper">
					<img :src="currentImage.filePath" alt="">
				</div>
				<ul class="pagesetfixed">
					<li v-for="(item,index) in imageUrllist" :class="index==tabindex?'hover':''" @click="pageimageclick(index)">{{index+1}}</li>
				</ul>
			 </div>
			 <div class="uploadcardInfo">
				 <h3>筛选异常列表({{total}})</h3>
				 <div class="yclbtitleLeft">
					<el-select v-model="scannerNo" placeholder="请选择设备ID" clearable @change="scanNumberchange">
						<el-option
						v-for="item in scanIdlist"
						:key="item"
						:label="item"
						:value="item">
						</el-option>
					</el-select>
					<div class="inputBox" style="width:324px;margin-right:14px;position:relative">
                        <el-date-picker
                        @change="datapickchange"
                        style="width:324px"
                            v-model="examdate"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']">
                        </el-date-picker>
                        <div class="dataicon">
                            <img src="../../assets/image/school/data.png" alt="">
                        </div>
                    </div>
                    <div style="margin-left:14px;">
						<el-button @click="searchboxinfo">搜索</el-button>
					</div>
				 </div>
				 <div style="padding:0 15px;">
                    <el-table
                        ref="multipleTable"
                        :data="displayData"
                        tooltip-effect="dark"
                        style="width: 100%"
                        :height="tableheight"
                        class="custom-table"
                        highlight-current-row
                        @row-click="handleRowClick"
						 @current-change="handleCurrentChange">
                         <!-- <el-table-column
					       type="selection"
					       width="55">
					     </el-table-column> -->
					     <el-table-column
					       label="序号">
					       <template slot-scope="scope">{{  scope.$index + 1}}</template>
					     </el-table-column>
					     <el-table-column
					       prop="scannerNo"
					       label="扫描仪ID">
					     </el-table-column>
					     <el-table-column
					       prop="scannerTime"
					       label="扫描时间">
					     </el-table-column>
                    </el-table>
                    <!-- <div v-if="loading" class="loading-more" >加载中...</div> -->
				 </div>
				 <div class="yclbtitleRight">
				 	<el-button @click="translatedata">刷新</el-button>
				 	<!-- <el-button @click="dacdeletmore">批量删除</el-button>
				 	<el-button @click="mandatoryidentification">识别二维码</el-button> -->
				 </div>
				 <h3 style="border:none;border-top:solid 1px #D8E4F0;margin-top:25px">作业核对绑定</h3>
				 <div class="yclbtitleLeft" style="padding-top:0;">
					<div>
						<el-input clearable placeholder="作业ID" v-model="workId"></el-input>
						<el-input clearable placeholder="作业名称" v-model="workName"></el-input>
					</div>
					<div style="margin-left:14px;">
						<el-button @click="searchboxexam">搜索</el-button>
						<el-button style="width:110px;" @click="suresubmit">确认并提交</el-button>
					</div>
				 </div>
				<div>
					 <div style="padding:0 15px;">
						 <el-table
							 ref="multipleTable1"
							 :data="examlist"
							 tooltip-effect="dark"
							 style="width: 100%;"
								class="custom-table"
								highlight-current-row
								:height="tableheight1"
								@row-click="handleRowClickexam"
								:row-key="(row) => row.id"
								>
							 <el-table-column
							   prop="id"
							   label="作业ID">
							 </el-table-column>
                             <el-table-column
							   prop="workName"
							   label="作业名称">
							 </el-table-column>
							 <el-table-column
							   prop="scanTime"
							   label="扫描时间">
							 </el-table-column>
							 <el-table-column
							   prop="gradeName"
							   label="年级">
							 </el-table-column>
						 </el-table>
					 </div>
				 </div>
			 </div>
		</div>
	</div>
</template>

<script>
	import {get,post,del,dele,postscan} from '../../request/api.js'
	import draggable from 'vuedraggable';
export default {
  data() {
    return {
		  multipleSelection: [],
		  imageUrllist:[],
		  tabindex:0,
		  examNumber:'',
		  studentName:'',
		  examNumber1:'',
		  studentName1:'',
		  examycnumber:[],
		  examlist:[],
		  currentImage:'',
		  cardabsore:false,
		  viewerVisible: false, // 控制查看器的显示状态
		  viewerIndex: 0, // 当前查看的图片索引
		  currentRow: null,
		  examkhhdlist:{},
		  rowpaperId:0,
		  numbersl:{},
		  batchrecognitionishow:false,
		  mandatoryidentificationishow:false,
		  isExamNo:true,
		  isMissExam:false,
		  isOption:false,
		  totalNumber:0,
		  qzshibNumber:0,
		  timer:null,
		  timer1:null,
		  timer2:null,
		  position: { x: 24, y: 72 },
		  startPos: { x: 0, y: 0 },
		  isDragging: false,
		  isFullscreen: false, // 当前是否处于全屏状态
		  batchNo:'', // 批次号
		  serialNo:'',//流水号
		  batchNoList:[],
          scanIdlist:[],//设备id列表
          scannerNo:'', //设备id
          startTime:'',
          endTime:'',
          examdate:'',
          tableheight: 100,  // 添加这行
            tableheight1: 0, // 添加这行
            currentPage: 1,
            total: 0,
            displayData: [], // 显示的数据
            pageSize: 50, // 每次加载的数量
            loading: false,
            loadedAll: false,
            workId:'',
            workName:'',
            submitDate:{
                workId:'',
                paperImages:[]
            },
			isNewSearch: false,
    }
  },
  mounted() {
	  // 监听全屏状态变化
	  document.onfullscreenchange = this.handleFullscreenChange;
	  this.examobjcontent = JSON.parse(sessionStorage.getItem('examInfo'))
	  this.$nextTick(() => {
        this.tableheight = window.innerHeight - 600
        this.tableheight1 = window.innerHeight - 700
	  });
	  this.scanIdclick()// 获取扫描仪ID
      // 监听表格滚动事件
    this.$refs.multipleTable.bodyWrapper.addEventListener('scroll', this.handleScroll)
	  this.yclistbox()
	  this.examlistclick()
      
  },
  methods: {
    // 获取扫描仪ID
    scanIdclick(){
        get('/workexcption/scannerlist').then(res=>{
            if(res.code == 200){
                this.scanIdlist = res.data
            }
        })
    },
    // 日期筛选
    datapickchange(value){
        // //console.info(value)
        // 清空现有数据
		this.isNewSearch = true
        this.displayData = []
        this.loadedAll = false
        if(value!=null){
            this.startTime= value[0]
            this.endTime= value[1]
            this.yclistbox()
        }else{
            this.startTime=undefined
            this.endTime= undefined
            this.yclistbox()
        }
    },
    //筛选设备号
    scanNumberchange(value){
		this.isNewSearch = true
        // 清空现有数据
        this.displayData = []
        this.loadedAll = false
        this.scannerNo = value
        this.yclistbox()
    },
	
	  //刷新
	  translatedata(){
		  this.yclistbox()
		  this.examlistclick()
	  },
        searchboxinfo() {
			this.isNewSearch = true
			this.yclistbox()
		},
	  // 异常列表
      yclistbox(){
        if (this.loading) return
        this.loading = true
        let obj = {
            scannerNo:this.scannerNo?this.scannerNo:'',
            startTime:this.startTime?this.startTime:'',
            endTime:this.endTime?this.endTime:'',
        }
        get('/workexcption/excption',obj)
        .then(res=>{
            this.loading = false
            if(res.code==200 && res.data && res.data.length > 0){
                // 如果是新的搜索条件，直接使用新数据
				if (this.isNewSearch) {
					this.displayData = res.data.slice(0, this.pageSize)
					this.total = res.data.length
					
					// 设置默认图片
					if (res.data.length > 0) {
						this.imageUrllist = res.data[0].paperImages
						this.currentImage = res.data[0].paperImages[0]
					}
					
					// 检查是否已加载全部数据
					if (this.displayData.length >= res.data.length) {
						this.loadedAll = true
					}
				} else {
					// 滚动加载逻辑保持不变
					const start = this.displayData.length
					const end = Math.min(start + this.pageSize, res.data.length)
					const actualData = res.data.slice(start, end)
					
					this.displayData = [...this.displayData, ...actualData]
					this.total = res.data.length
					
					if (this.displayData.length >= res.data.length) {
						this.loadedAll = true
					}
				}
            } else {
                // 清空数据
                this.displayData = []
                this.total = 0
                this.loadedAll = true
                this.imageUrllist = []
                this.currentImage = null
                
                if(res.code != 200 || !res.data || res.data.length === 0){
                    this.$message({
                        type: 'warning',
                        message: '没有查询到相关数据',
                        offset:60
                    });
                }
            }
			this.isNewSearch = false
        })
        .catch(error => {
            this.loading = false
            this.displayData = []
            this.total = 0
            this.loadedAll = true
            this.imageUrllist = []
            this.currentImage = null
            this.isNewSearch = false
            this.$message({
                type: 'error',
                message: '数据加载失败',
                offset:60
            });
        })
    },
      // 监听滚动事件
        handleScroll() {
			const table = this.$refs.multipleTable
			const scrollTop = table.bodyWrapper.scrollTop
			const scrollHeight = table.bodyWrapper.scrollHeight
			const clientHeight = table.bodyWrapper.clientHeight
			
			// 添加10px缓冲区域确保触发加载
			if (scrollHeight - (scrollTop + clientHeight) < 10 && !this.loading && !this.loadedAll) {
				this.yclistbox()
			}
        },
	  //考号核对列表
	  examlistclick(){
		  let obj={
            workId:this.workId?this.workId:'',
            workName:this.workName?this.workName:'',
		  }
		  get('/workexcption/worklist',obj)
		  .then(res=>{
			//   //console.info(res)
			  if(res.code==200){
				 this.examlist = res.data
			  }else{
				  this.$message({
				    type: 'error',
				    message: res.message,
				  	offset:60
				  });
			  }
		  })
	  },
	  handleRowClick(row,column,enent){
		this.rowpaperId = row.id
		this.imageUrllist = row.paperImages
		this.currentImage = row.paperImages[0]
		this.tabindex = 0
		// 获取当前选中的行数据
		// const table = this.$refs.multipleTable;
		// const isSelected = table.selection.some(item => item.id === row.id);
		// this.$nextTick(() => {
		//   this.$refs.multipleTable.toggleRowSelection(row, !isSelected);
		// });
	  },
	  handleRowClickexam(row,column,enent){
		this.examkhhdlist = row
	  },
	  searchbutton(){
		  this.yclistbox()
	  },
	  searchboxexam(){
		 this.examlistclick() 
	  },
	  handleSelectionChange(val) {
		  this.multipleSelection = val;
		  if(!val){
			 this.rowpaperId = val[0].id 
		  }
		},
		pageimageclick(num){
			this.tabindex = num
			this.currentImage = this.imageUrllist[num]
		},
		handleCurrentChange(val) {
			this.currentRow = val;
		},
		suresubmit(){
			// //console.info(this.examkhhdlist) 
			if(this.examkhhdlist && this.examkhhdlist.id&&this.imageUrllist){
                this.submitDate.workId=this.examkhhdlist.workId
                this.submitDate.paperImages = this.imageUrllist.map(item=>{
                    return {id:item.id}
                })
				postscan('/papers/analysis',this.submitDate)
				.then(res=>{
                    //console.info('res',res)
					if(res.code==200){
						this.isNewSearch = true
						this.yclistbox()
						this.examlistclick()
						this.$message({
						  type: 'success',
						  message:'绑定成功',
							offset:60
						});
					}else{
						this.isNewSearch = true
						this.$message({
						  type: 'error',
						  message:res.message,
							offset:60
						});
					}
				})
			}else{
				this.$message.error('请选择异常需要绑定的作业')
			}
		},
		startDrag(event) {
		  event = event.type === 'touchstart' ? event.touches[0] : event;
		  
		  this.startPos = {
		    x: event.clientX - this.position.x,
		    y: event.clientY - this.position.y,
		  };
		  
		  this.isDragging = true;
		  
		  // 添加事件监听
		  document.addEventListener('mousemove', this.onDrag);
		  document.addEventListener('mouseup', this.stopDrag);
		  document.addEventListener('touchmove', this.onDrag);
		  document.addEventListener('touchend', this.stopDrag);
		},
		onDrag(event) {
		  if (!this.isDragging) return;
		  event.preventDefault();
		  
		  event = event.type === 'touchmove' ? event.touches[0] : event;
		  
		  this.position = {
		    x: event.clientX - this.startPos.x,
		    y: event.clientY - this.startPos.y,
		  };
		},
		stopDrag() {
		  this.isDragging = false;
		  
		  // 移除事件监听
		  document.removeEventListener('mousemove', this.onDrag);
		  document.removeEventListener('mouseup', this.stopDrag);
		  document.removeEventListener('touchmove', this.onDrag);
		  document.removeEventListener('touchend', this.stopDrag);
		},
		// 切换全屏
		toggleFullscreen() {
		  if (!document.fullscreenEnabled) {
		    alert("您的浏览器不支持全屏功能！");
		    return;
		  }
		
		  if (this.isFullscreen) {
		    // 退出全屏
		    document.exitFullscreen();
			this.$refs.fullscreenElement.style.overflow = 'auto';
		  } else {
		    // 进入全屏
		    this.$refs.fullscreenElement.requestFullscreen();
			this.$refs.fullscreenElement.style.overflow = 'auto';
		  }
		},
		// 处理全屏状态变化
		handleFullscreenChange() {
		  this.isFullscreen = !!document.fullscreenElement;
		},
        quiteboxclick(){
			this.$router.push(`/homework`)
		},
  },
  components: {
    draggable
  },
  beforeDestroy() {
      // 清除定时器
      clearTimeout(this.timer);
  	   clearTimeout(this.timer1);
  	   clearTimeout(this.timer2);
		 this.timer=null
	   this.timer1=null
	   this.timer2=null
	   // 组件销毁时移除监听
	   this.stopDrag();
       this.$refs.multipleTable.bodyWrapper.removeEventListener('scroll', this.handleScroll)
    },
	beforeRouteLeave(to, from, next) {
			 // 清除定时器
			 clearTimeout(this.timer);
			 clearTimeout(this.timer1);
			 clearTimeout(this.timer2);
	    next();
	  },
};
</script>

<style scoped>
canvas {
  cursor: crosshair;
}
.header{
	padding:0 40px;
	height:48px;
	padding:0 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color:#fff;
	background:#2379F6;
	font-size:16px;
}
.header h3{
	font-weight: normal;
	font-size:16px;
}
.header p{
	display: flex;
}
.header p b{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 134px;
	height: 32px;
	background: rgba(255,255,255,0.1);
	border-radius: 17px;
	border: 1px solid #FFFFFF;
	text-align: center;
	line-height:32px;
	cursor: pointer;
	margin-right:14px;
}
.header p b img{
	width:16px;
	margin-right:8px;
}
.header p em{
	display: inline-block;
	width: 76px;
	height: 32px;
	background: #FFFFFF;
	border-radius: 17px;
	border: 1px solid #FFFFFF;
	color:#2379F6;
	text-align: center;
	line-height:32px;
	cursor:pointer
}
.tabNav{
	min-width:100%;padding:0 40px;
	height:54px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:0 24px 0 10px;
	background:#fff;
}
.tabNav ul{
	display: flex;
	align-items: center;
	font-size:14px;
}
.tabNav ul li{
	padding:0 20px;
	cursor: pointer;
	line-height:38px;
	color:#557292;
	position:relative
}
.tabNav ul li:hover,.tabNav ul li.hover{
	color:#2A303B;
}
.tabNav ul li:hover::after,.tabNav ul li.hover::after{
	content:'';
	width: 24px;
	height: 4px;
	background: #295CFF;
	border-radius: 2px;
	position:absolute;
	left:50%;
	transform: translateX(-50%);
	bottom:0
}
.tabNav span{
	display: inline-block;
	width: 140px;
	height: 34px;
	background: #F2F6FB;
	border-radius: 10px;
	border: 1px solid #295CFF;
	font-weight: 500;
	font-size: 14px;
	color: #295CFF;
	text-align: center;
	line-height:34px;
	cursor: pointer;
}
/* 上传 */
.uploadMarks{
	box-sizing: border-box;
	background:#F4F7FD;
	width:100vw;
	height:calc(100vh - 49px);
	position: relative;
}
.smcsbutton{
	width: 124px;
	height: 34px;
	background: #2379F6;
	border-radius: 10px;
	font-size: 14px;
	color: #FFFFFF;
	text-align: center;
	border:none;
	/* margin:24px 0 0 24px; */
	position: absolute;
	padding:0;
	left:24px;
	top:24px;
}
.boxcenter{
	display: flex;
	justify-content: space-between;
}
.uploadcardInfo{
	width:80%;
	height:calc(100vh - 49px);
	background:#fff;
	position:relative;
	box-shadow: 0 4px 16px 0 #5572921a;
	overflow: auto;
	position:relative;
}
.examboxbutton{
	width:100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding:0 15px;
	height: 54px;
	background: #E8F0FA;
	position:absolute;
	left:0;
	bottom:0;
}
.examboxbutton >>>  .el-button{
	width: 124px;
	height: 34px;
	border-radius:10px;
	padding:0;
	margin:0;
	font-size:12px;
	border: 1px solid #295CFF;
	color:#295CFF;
	background:none;
}
.examboxbutton >>>  .el-button:first-child{
	background:#295CFF;
	border: 1px solid #295CFF;
	color:#fff;
}
.examboxbutton >>>  .el-button:nth-child(2){
	margin:0 8px;
}
.examboxbutton1{
	width:100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding:0 15px;
	height: 54px;
	background: #E8F0FA;
	position:absolute;
	left:0;
	bottom:0;
	justify-content: center;
}
.examboxbutton1 >>>  .el-button{
	width: 124px;
	height: 34px;
	border-radius:10px;
	padding:0;
	margin:0;
	font-size:12px;
	border: 1px solid #295CFF;
	color:#295CFF;
	background:none;
}
.examboxbutton1 >>>  .el-button:first-child{
	background:#295CFF;
	border: 1px solid #295CFF;
	color:#fff;
}
.examboxbutton1 >>>  .el-button:nth-child(2){
	margin:0 8px;
}
.qtbuttonset{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top:14px;
}
.qtbuttonset em{
	width: 124px;
	height: 34px;
	background: #295CFF;
	border-radius: 10px;
	font-size:14px;
	color:#fff;
	text-align: center;
	line-height: 34px;
	margin:8px;
}
.qtbuttonset em:last-child{
	width: 124px;
	height: 34px;
	background: #F2F6FB;
	border-radius: 10px;
	border: 1px solid #295CFF;
	color:#295CFF;
}
.uploadcardInfo h3{
	line-height:67px;
	border-bottom:solid 1px #D8E4F0;
	padding:0 24px;
	color:#2A303B;
	font-weight:normal
}
.uploadcardInfo ul li{
	display: flex;
	align-items: center;
	color:#8E96A4;
	font-size:16px;
	padding:0 24px;
	margin-top:24px;
}
.uploadcardInfo ul li span{
	color:#8E96A4;
	width:100px;
}
.uploadcardInfo ul li >>> .el-input__inner{
	border-radius:10px;
}
.uploadcardInfo ul li >>> .el-textarea{
	width:calc(100% - 100px)
}
.uploadCardimage{
	width:calc(100% - 460px);
	height:calc(100vh - 49px);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.uploadCardimage span{
	display: block;
	width:100%;
	text-align: center;
}
.uploaddiv{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.uploaddivattention{
	font-size: 14px;
	color: #B3B8C2;
}
.cropperBox{
	height:calc(100vh - 49px);
	display: flex;
}
.cropperImageset{
	width:calc(100% - 370px);
	height:calc(100vh - 49px);
	overflow:auto;
	position: relative
}
.routate{
  	position:absolute;
  	left:50px;
  	top:5px;
  	background:#fff;
  	height:60px;
  	display: flex;
  	align-items: center;
  	padding:0 10px 0 0;
  	box-shadow: 0 0 5px rgba(0,0,0,0.1);
  	border-radius:5px;
  	font-size:14px;
  	color:#557292;
  	border-radius: 10px;
	z-index:10
  }
 .routate >>> .el-select,.routate >>>.el-input{
  	width:150px;
  }
 .routate >>> .el-select{
  	margin-right:10px;
  }
  .routate >>>.el-input{
  	margin-left:10px;
  	margin-right:10px;
  }
 .routate >>> .el-button{
  	border-radius:10px;
  	height:35px;
  	width:55px;
  	padding:0 ;
	margin-left:10px
  }
  .routate >>> .el-input__inner{
  	border-radius:10px;
  	height:35px;
  }
  .breadBox >>> .el-breadcrumb__inner a,.breadBox >>> .el-breadcrumb__inner.is-link{
  	font-weight:normal
  }
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
  	font-weight:bold
  }
  .routerlistbox{
  	  width: 224px;
  	  height: 30px;
  	  background: #295cff0f;
  	  border: 1px solid #FFFFFF;
  	  border-radius: 4px;
  	  display: flex;
  	  align-items: center
  }
  .routerlistbox a{
  	  flex:1;
  	  height:30px;
  	  line-height:30px;
  	  text-align: center;
  	  font-size:14px;
  	  color:#fff;
  }
   .routerlistbox a.hover{
  	   background:#fff;
  	   color:#2379F6
   }
   .cardczpk{
   	  box-sizing: border-box;
   	  width: 174px;
   	  height: 90px;
   	  background: #FFFFFF;
   	  box-shadow: 0 4px 16px 0 #5572921a;
   	  border-radius: 10px;
   	  position:fixed;
   	  left:24px;
   	  top:72px;
   	  padding:14px;
   }
   .cardczpk span{
   	  font-size:14px;
   	  color:#2A303B;
   }
   .cardczpk div{
   	  display: flex;
   	  align-items: center;
   }
   .cardczpk div i,.cardczpk div b{
   	  box-sizing: border-box;
   	  font-style: normal;
   	  width: 66px;
   	  height: 34px;
   	  background: #295cff1a;
   	  border: 1px solid #295cff1a;
   	  border-radius: 10px;
   	  font-size:14px;
   	  color:#295CFF;
   	  line-height:34px;
   	  padding-left:10px;
   	  cursor: pointer;
   	  margin-top:5px;
   }
   .cardczpk div i{
   	  background:url(../../assets/image/school/roate.png) no-repeat 43px center;
   	  background-size:13px 14px
   }
   .cardczpk div b{
   	  margin-left:14px;
   	  background:url(../../assets/image/school/px.png) no-repeat 43px center;
   	  background-size:13px 14px
   }
   .yclbtitleLeft{
	   display: flex;
	   align-items: center;
	   padding:14px 15px;
   }
   .yclbtitleLeft >>> .el-color-picker__icon, .yclbtitleLeft >>> .el-input, .yclbtitleLeft >>> .el-textarea{
	   width:auto;
   }
   .yclbtitleLeft >>> .el-select{
	margin-right:15px
   }
   .yclbtitleLeft >>> .el-input__inner{
		width: 140px;
		height: 34px;
		border: 1px solid #D8E4F0;
		border-radius: 10px;
		color:#2A303B;
		font-size:14px;
   }
   .yclbtitleLeft >>> .el-input__icon{
       line-height:36px;
   }
   .yclbtitleLeft >>> .el-button{
		width:80px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		border:none;
		color:#fff;
		padding:0 20px
   }
   .yclbtitleRight{
		display: flex;
		padding:15px 15px 0;
   }
   .yclbtitleRight >>> .el-button{
		width: 80px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		border:none;
		color:#fff;
		padding:0
   }
   .yclbtitleRight >>> .el-button:nth-child(2){
		background:#EC555A;
   }
   .custom-table {
     width: 100%;
     border: 1px solid rgba(216,228,240,0.34);
     border-radius:10px;
     border-right: none;
     border-bottom:none;
   }
   
   /* 自定义表格内部元素的样式 */
   .custom-table >>> .el-table{
   	border-collapse: collapse; /* 关闭默认的边框合并模式 */
   	  border-spacing: 0 !important; /* 强制重置间距 */
		 height: 100% !important;
   }
   .custom-table >>> .el-table__body-wrapper {
		height: calc(100% - 42px) !important; /* 减去表头高度 */
		max-height: none !important;
	}
   .custom-table >>> .el-table__header-wrapper th {
     background-color: #E8F0FA;
     height:42px;
     padding:0;
     text-align: center;
     font-weight:normal
   }
   .custom-table >>> .el-table__row td {
     height:42px;
     padding:0;
     text-align: center;
     border-bottom:solid 1px rgba(216,228,240,0.34);
     border-right:solid 1px rgba(216,228,240,0.34);
     border-collapse: collapse; /* 关闭默认的边框合并模式 */
       border-spacing: 0 !important; /* 强制重置间距 */
   }
   .custom-table >>> .el-table__row td b{
   	display:block;
   	height:36px;
   	width:97%;
   	text-align: center;
   	font-size:14px;
   	line-height:36px;
   	color:#2A303B;
   }
   .custom-table >>> .el-table__row td b.hover{
   	border: 1px solid #EC555A;
   	cursor: pointer;
   }
   .boxihover{
   	border: 1px solid #EC555A;
   	cursor: pointer;
   }
   .custom-table >>> .el-input{
   	height:35px;
   }
   .custom-table >>> .el-input__inner{
   	background:rgba(236,85,90,0.2); ;
   	padding:0;
   	text-align: center;
   	border:none;
   	height:36px;
   	width:101%
   }
   .custom-table >>> .el-table__body-wrapper {
    overflow-y: auto !important;
}
   .el-table .warning-row {
       background: #ffffff;
    }
   .el-table .success-row {
       background: #D8E4F0;
   }
   .el-table .cell{
   	padding:0 !important;
   }
   .custom-table >>> .el-table__row td div.cell{
   	padding:0 !important;
   }
    .custom-table >>>  .el-table__body tr.current-row > td {
     background-color: rgb(233, 238, 255) !important; /* 自定义背景颜色 */
   }
   .pagesetfixed{
	   position:fixed;
	   left:25px;
	   bottom:25px;
	   display: flex;
	   align-items: center;
	   width:auto;
	   height: 43px;
	   border-radius: 5px;
	   background: #FFFFFF;
	   box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3); 
	   padding-left:10px;
   }
   .pagesetfixed li{
	  width: 25px;
	  height: 25px;
	  border-radius: 3px;
	  opacity: 1;
	  /* Brand 品牌/Brand1-Light */
	  background: #F2F3FF;
	  line-height:25px;
	  font-size: 14px;
	  color:#366EF4;
	  text-align: center;
	  margin-right:10px;
	  cursor: pointer;
   }
   .pagesetfixed li.hover{
	   background:#366EF4;
	   color:#fff;
   }
   .uploadcadContent{
   	   position:fixed;
   	   width:100%;
   	   height:100%;
   	   background:rgba(0,0,0,0.7);
   	   left:0;
   	   top:0;
   	   z-index: 10;
     }
     .uploadcad{
   	  background: #FFFFFF;
   	  box-shadow: 0 4px 16px 0 #5572921a;
   	  border-radius: 10px;
   	  padding:25px 0 25px 25px;
   	  position:fixed;
   	  left:50%;
   	  top:50%;
   	  transform: translate(-50%,-50%);
	  width:690px;
     }
     .uploadcad ul{
   	  display: flex;
   	  align-items: center;
   	  flex-wrap: wrap;
     }
     .uploadcad ul li{
   	  width: 200px;
   	  height: 140px;
   	  background: #33333d;
   	  margin-right:25px;
   	  position:relative
     }
     .uploadcad ul li img{
   	  width:100%;
   	  border: 1px solid #295cff80;
     }
     .uploadcad ul li div{
   	  font-size:12px;
   	  text-align: center;
     }
     .uploadcad ul li div span{
   	  padding-top:12px;
   	  color:#295CFF;
   	  cursor:pointer;
     }
     .uploadcad h3{
   	  font-weight:normal;
   	  font-size:18px;
   	  margin-bottom:15px;
     }
     .uploadcad ul li p{
   	  width:100%;
   	  height:100%;
   	  position:absolute;
   	  left:0;
   	  top:0;
   	  background:rgba(0,0,0,0.3);
   	  display: flex;
   	  align-items: center;
   	  justify-content: center;
     }
     .uploadcad ul li em{
   	  width: 52px;
   	  height: 24px;
   	  background: #ffffff;
   	  border-radius: 12px;
   	  font-size: 16px;
   	  color: #295CFF;
   	  text-align: justify;
   	  line-height:24px;
   	  text-align: center;
   	  font-style:normal;
   	  cursor: pointer;
     }
     .buttonreupload{
   	  margin-top:50px;
     }
     .buttonreupload button,.buttonreupload b{
   	  display: inline-block;
   	 width: 124px;
   	 height: 34px;
   	 border-radius: 10px; 
   	 border: 1px solid #295CFF;
   	 text-align: center;
   	 line-height:34px;
   	 font-size:14px;
   	 cursor: pointer;
     }
     .buttonreupload button{
   	  background: #295CFF;
   	  color:#fff;
   	  margin-right:24px;
     }
     .buttonreupload b{
   	  color:#295CFF;
   	  background: #F2F6FB;
     }
	 .boxsetdelecte{
	 	position:relative;
	 }
	 .boxsetdelecte span{
	 	position:absolute;
	 	left:-11px;
	 	top:24px;
	 }
	 .buttonboxedit{
	   	display: flex;
	   	align-items: center;
	   	justify-content: center;
	   	padding-top:5px;
	 	width:200px;
	 	height:86%;
	 	background:rgba(0,0,0,0.5);
	 	position:absolute;
	 	left:-12px;
	 	top:35px;
		flex-wrap: wrap;
	   }
	   .buttonboxedit i{
	   	width: 52px;
	   	height: 24px;
	   	background: #fff;
	   	border-radius: 12px;
	   	font-size: 16px;
	   	color: #295CFF;
	   	text-align: justify;
	   	line-height:24px;
	   	text-align: center;
	   	font-style:normal;
	   	cursor: pointer;
	   }
	   .boxsetdelecte b{
	   	display: block;
	   	text-align: center;
	   	font-size:20px;
	   	padding-bottom:6px;
	   }
	 .imgmove span{
	 	display: flex;
	 	align-items: center;
		flex-wrap: wrap;
	 }
	 .imgmove span div{
	 	margin:0 11px;
	 }
	 .addExamMain{
	 	position: fixed;
	 	width:100%;
	 	height:100%;
	 	background:rgba(0,0,0,0.5);
	 	left:0;
	 	top:0;
	 	z-index:100;
	 }
	 .addExamContent{
	 	width: 584px;
	 	height: auto;
	 	background: #FFFFFF;
	 	box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
	 	border-radius: 10px;
	 	position: fixed;
	 	left:50%;
	 	top:50%;
	 	transform: translate(-50%,-50%);
	 	z-index:2;
	 	box-sizing: border-box;
	 	padding:30px;
	 }
	 .addExamContent h3{
	 	font-size:18px;
	 	padding-bottom:10px;
	 }
	 .addExamContent p{
		 color:red;
		 font-size:14px;
	 }
	 .sbcontentbsl{
		 display: flex;
		 align-items: center;
		 padding:20px 0;
		 color:#333;
		 font-size:14px;
	 }
	 .sbcontentbsl >>> .el-checkbox{
		 color:#333;
	 }
	 .sbcontentbsl span{
		 width:200px;
		 height:35px;
		 background: #F7F8FA;
		 border-radius:4px;
		 padding-left:15px;
		 font-size:14px;
		 color:#86909C;
		 line-height:35px;
		 margin-left:15px;
	 }
	 .sbjdprogreen{
		 font-size:14px;
	 }
	 .groupbutton{
	 	display: flex;
	 	align-items: center;
	 	padding-top:20px;
	 }
	 .groupbutton >>> .el-button{
	 	width: 124px;
	 	height: 34px;
	 	background: #295CFF;
	 	border-radius: 10px;
	 	font-size: 14px;
	 	color: #FFFFFF;
	 	padding:0;
	 }
	 .groupbutton >>> .el-button:last-child{
	 	background: #F2F6FB;
	 	border-radius: 10px;
	 	border: 1px solid #295CFF;
	 	color:#295CFF;
	 	margin-left:24px;
	 }
     .inputBox{
		width: 200px;
	}	
    .dataicon{
		position:absolute;
		right:0;
		width:34px;
		height:35px;
		border-left:solid 1px #D8E4F0;
		top:0;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}
	.dataicon img{
		width:14px;
		height:14px;
	}
    .inputBox >>> .el-date-editor .el-range__icon{
        display: none
    }
    .inputBox >>> .el-date-editor .el-range-separator{
        line-height:27px;
    }
</style>